<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src='<c:url value="/resources/js/leave.js"/>' defer></script>
<link rel="stylesheet" href='<c:url value="/resources/css/leave.css"/>'/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>
<div>
	<h2 align="center"><b>Leave Application Form</b></h2>
</div> 
<br/>
<form:form method="POST" commandName="leaveRecord" action="leave/update">
	<div align="center">
        <table>
        	<tr align="left">
                <td><label>Category<sup>*</sup></label></td>
                <td>
                    <form:select path="leaveType" id="category" onchange="compensation()">
                        <option value="Annual">Annual</option>
                        <option value="Compensation">Compensation</option>
                        <option value="Medical">Medical</option> 
                    </form:select>                  
                </td>
            </tr>
            <tr align="left">
                <td><label>Leave Start<sup>*</sup></label></td>
                <td><form:input path="leaveStart" class="datepicker" onfocus="this.blur();"/></td>
                <td></td>
            </tr>
            <tr align="left">
                <td><label>Leave End<sup>*</sup></label></td>
                <td><form:input path="leaveEnd" class="datepicker" onfocus="this.blur();"/></td>
                <td></td>
            </tr>
            <tr align="left" id="duration">
                <td><label>Duration<sup>*</sup></label></td>
                <td>
                	<form:select path="duration" class="duration" id="one">
                 		<c:forEach begin="1" end="10" var="countvar">
							<option>${ countvar / 2 }</option>
						</c:forEach>
					</form:select>
				</td>
                <td><form:errors path="duration" cssStyle="color: red;"/></td>
            </tr>            
            <tr align="left">
            	<td><label>Reason<sup>*</sup></label></td>
            	<td><form:textarea path="additionalReason" rows="2" cols="25" maxlength="45"/></td>
            	<td><form:errors path="additionalReason" cssStyle="color: red;"/></td>
            </tr>
            <tr align="left">
                <td><label>Work Dissemination</label></td>
                <td>
                    <form:textarea path="workDissemination" rows="2" cols="25" maxlength="45"></form:textarea>
                </td>
                <td><sub>(Max. char.: 45)</sub></td>
            </tr>
            <tr align="left">
                <td><label>Contact Details</label></td>
                <td><form:input path="contactDetails" type="number" min="0" max="999999999" value="0"/></td>
                <td><form:errors path="contactDetails" cssStyle="color: red;"/></td>
            </tr>  
            <tr align="left">
                <td>
    	            <sup>*These field(s) are required.</sup>
                </td>                
            </tr>         	
		</table>
	</div>
		<table align="center">
			<tr>
				<td align="center">
					<input type="submit" value="Update" name="update"/>
				</td>
				<td align="center">
                    <input type="submit" value="Cancel" name="cancel"/>
                </td>
			</tr>
		</table>
</form:form>
</body>
</html>